<!DOCTYPE html>
<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<style type="text/css">
ul, li {
	margin:0;
	padding:0;
}
body {
	font:14px/1.5 Arial;
	color:#666;
}
#box {
	position:relative;
	width:600px;
	height:400px;
	border:2px solid #000;
	margin:10px auto;
	overflow:hidden;
}
#box ul {
	list-style-position:inside;
	margin:10px;
}
#top, #bottom {
	width:100%;
	color:#FFF;
	height:50%;
	overflow:hidden;
}
#top {
	background:green;
}
#bottom {
	background:skyblue;
}
#line {
	position:absolute;
	top:50%;
	width:100%;
	height:4px;
	overflow:hidden;
	margin-top:-2px;
	background:red;
	cursor:n-resize;
}
</style>
<script>  
function $(id) {  
return document.getElementById(id)  
}  
window.onload = function() {  
	var oBox = $("box"), oBottom = $("bottom"), oLine = $("line"),otop = $("top"),top_content=$('top_content'),botom_content=$('botom_content');
	function overflow(){
			if(otop.offsetHeight<top_content.offsetHeight){
				otop.style.overflowY='scroll';
			}else{
				otop.style.overflowY='hidden';
			}
			if(oBottom.offsetHeight<botom_content.offsetHeight){
				oBottom.style.overflowY='scroll';
			}else{
				oBottom.style.overflowY='hidden';
			}
	}
	overflow();
	oLine.onmousedown = function(e) {  
		var disY = (e || event).clientY;//当前鼠标的位置  
		oLine.top = oLine.offsetTop;//当前分割线与上面的距离    
		document.onmousemove = function(e) {  
			var iT = oLine.top + ((e || event).clientY - disY); //移动后上面的高度 
			var maxT = oBox.clientHeight;  //盒子的最大距离
			oLine.style.margin = 0;  
			iT < 0 && (iT = 0);  
			iT > maxT && (iT = maxT);  
			oLine.style.top = otop.style.height = iT + "px";
			 oBottom.style.height= (maxT-iT)+"px";
			 overflow();
			return false ; 
		};  
		document.onmouseup = function() {  
			document.onmousemove = null;  
			document.onmouseup = null;  
			oLine.releaseCapture && oLine.releaseCapture()  
		};  
		oLine.setCapture && oLine.setCapture();  
		return false  
	};  
};  
</script>

<div id="box">
		<div id="top">
				<ul id="top_content">
						<li>这是文字的第一行</li>
						<li>这是文字的第二行</li>
						<li>这是文字的第三行</li>
						<li>这是文字的第一行</li>
						<li>这是文字的第二行</li>
						<li>这是文字的第三行</li>
						<li>这是文字的第一行</li>
						<li>这是文字的第二行</li>
						<li>这是文字的第三行</li>
						<li>这是文字的第一行</li>
						<li>这是文字的第二行</li>
						<li>这是文字的第三行</li>
				</ul>
		</div>
		<div id="bottom">
				<ul id="botom_content">
						<li>这是文字的第一行</li>
						<li>这是文字的第二行</li>
						<li>这是文字的第三行</li>
						<li>这是文字的第一行</li>
						<li>这是文字的第二行</li>
						<li>这是文字的第三行</li>
				</ul>
		</div>
		<div id="line"></div>
</div>
</body></html>